<template>
  <cj-popup v-model="showAialogPop" class="c-p c-bg-transparent c-ww504">
    <div class="c-p c-bgGw">
      <div class="c-pa c-p-t0 c-pt230 c-w100">
        <div class="c-fc-xblack c-fs36 c-fw600 c-textAlign-c">推荐使用小程序打卡</div>
        <div class="c-flex-row c-alignc-center c-justify-center c-mt60">
          <div class="c-flex-row c-aligni-center">
            <div class="iconfont c-fs40 c-mr20 c-fc-wxfs">&#xe796;</div>
            <div class="c-fs30">入口易找</div>
          </div>
        </div>
        <div class="c-flex-row c-alignc-center c-justify-center c-mt36">
          <div class="c-flex-row c-aligni-center">
            <div class="iconfont c-fs40 c-mr20 c-fc-wxfs">&#xe796;</div>
            <div class="c-fs30">体验更好</div>
          </div>
        </div>
        <div class="c-ww330 c-mlr-auto c-hh76 c-flex-row c-flex-center c-br50 c-fs28 c-fc-white c-bg-wxbtn c-mt60 c-p">
          前往打卡小程序
          <div class="open-tag-wrap" v-if="isSupport">
            <wx-open-launch-weapp
              class="launch-btn"
              :appid="`${appid}`"
              :username="username"
              :path="`${path}?${wxappQuery}`"
              @error="handleErrorFn"
              @launch="handleLaunch"
            >
              <script type="text/wxtag-template">
                <!-- 这里是为了撑开元素，让其可以被点击，不添加template会报错，添加了template不添加内容也会报错 -->
                <div style="padding: 10000px">
                </div>
              </script>
            </wx-open-launch-weapp>
          </div>
          <div v-else class="open-tag-wrap" @click="clickGoWxApp"></div>
          <div class="c-pa c-ww80 c-hand">
            <img class="c-w100" :src="require('@/assets/i/wap/clockIn/hand.png')" alt="" />
          </div>
        </div>
        <div class="c-flex-row c-alignc-center c-justify-center c-mt30">
          <div class="c-flex-row c-aligni-center" @click="changeView">
            <div class="iconfont c-fs28 c-mr20" :class="showAgain?'c-fc-xblue':'c-fc-gray'">{{showAgain?'&#xe796;':'&#xe6f7;'}}</div>
            <div class="c-fs24 c-fc-gray">不再提示</div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-fc-sgray c-flex-row c-flex-center c-fs48 c-mt30">
      <i class="iconfont show c-fs48" @click="showAialogPop=false">&#xe84e;</i>
    </div>
  </cj-popup>
</template>


<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: "clockGoWx",
  //props: ["item"],
  props: {
    showAialogPop: {
      type: Boolean,
      default: false
    },
    clockInInfo:{
      type:Object,
      default: () => {}
    }
  },
  computed: {
  },
  data() {
    return {
      showAgain:false,
      appid:'wxc99b13f1a0b51048',
      wxappQuery: "",
      path:'/pages/clockIn/homeWorker/index',
      isSupport:localStorage.getItem('isWxApp') != 1,
    };
  },
  watch:{
    showAialogPop(val) {
      if (val) {
        switch (this.clockInInfo.type) {
          case 1:
            //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
            let startTimeTamp = new Date(`${this.clockInInfo.startTime} ${this.clockInInfo.startHour}`.replace(/-/g, "/")).getTime();
            let endTimeTamp = new Date(`${this.clockInInfo.endTime} ${this.clockInInfo.endHour}`.replace(/-/g, "/")).getTime();
            let nowTimeTamp = new Date().getTime();
            let curTime = utilJs.dateFormat(nowTimeTamp);
              //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
            if (nowTimeTamp < startTimeTamp || nowTimeTamp > endTimeTamp) {
              curTime = this.clockInInfo.startTime;
            }
            this.wxappQuery = `workType=1&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.clockInInfo.signColId}&curSelectDate=${curTime}`
            break;
          case 2:
            this.wxappQuery = `workType=2&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.clockInInfo.signColId}&curId=${this.clockInInfo.hwId}`
            //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
            break;
          case 3:
            this.wxappQuery = `workType=3&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.clockInInfo.signColId}&curId=${this.clockInInfo.hwId}`
            //闯关打卡
            break;
        }
      } else {
        this.$emit('closeAialogPop')
        if (this.showAgain) {
          this.closeAppletRemind()
        }
      }
    }
  },
  methods: {
    clickGoWxApp() {
      let fullPath = `${this.path}?${this.wxappQuery}`;
      let query = `?appId=${this.appid}&path=${encodeURIComponent(JSON.stringify(fullPath))}`;
      utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
    },
    changeView() {
      this.showAgain = !this.showAgain
    },
    handleLaunch(e) {
        console.log('handleLaunch---', e)
        // this.$emit('handleLaunch')
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    closeAppletRemind() {
      let data = {
        signColId:this.clockInInfo.signColId
      }
      let postUrl = `${global.apiurl}signCard/closeAppletRemind`;
      utilJs.postMethod(
        postUrl,
        data,
        (res) => {
        }
      );
    },
  },
  destroyed() {
    if (this.showAgain) {
      this.closeAppletRemind()
    }
  }
};
</script>
<style scoped>
.dialog-demo /deep/ .weui-dialog{
  background-color: transparent;
  width: 12.6rem;
  z-index: 100000 !important;
}
.c-ww504{width: 12.6rem;}
.c-pt230{
  padding-top: 5.75rem;
}
.open-tag-wrap {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
}
.launch-btn {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.c-bgGw{
  background: url("../../../assets/i/wap/clockIn/dialog_bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 17.2rem;
}
.c-hand{
  right: -0.8rem;
  bottom: -0.8rem;
}
.c-fc-wxfs{
  color: #2979FF;
}
.c-bg-wxbtn{
  background: #2979FF;
}
</style>